<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms" style="padding: 20px">
  <h1>User information</h1>
  <div class="gv-form">
    <p>{{$ctrl.user.displayName}}</p>
    <div class="gv-form-content gravitee-user-container" layout="column">
      <form name="formUser" ng-submit="$ctrl.save()">
        <div layout="row">
          <div flex="80">
            <div layout="row" layout-align="start center">
              <ng-md-icon flex="10" icon="person"></ng-md-icon>
              <md-input-container>
                <label>Firstname</label>
                <input
                  ng-model="$ctrl.user.firstname"
                  type="text"
                  ng-required="$ctrl.isInternalUser()"
                  ng-disabled="!$ctrl.isInternalUser()"
                />
              </md-input-container>
            </div>
            <div layout="row" layout-align="start center">
              <ng-md-icon flex="10" icon="person"></ng-md-icon>
              <md-input-container>
                <label>Lastname</label>
                <input
                  ng-model="$ctrl.user.lastname"
                  type="text"
                  ng-required="$ctrl.isInternalUser()"
                  ng-disabled="!$ctrl.isInternalUser()"
                />
              </md-input-container>
            </div>
            <div layout="row" layout-align="start center">
              <ng-md-icon flex="10" icon="contact_mail"></ng-md-icon>
              <md-input-container>
                <label>Email</label>
                <input ng-model="$ctrl.user.email" type="text" ng-required="$ctrl.isInternalUser()" ng-disabled="!$ctrl.isInternalUser()" />
              </md-input-container>
            </div>
            <div layout="row" layout-align="start center">
              <ng-md-icon flex="10" icon="lock">
                <md-tooltip>
                  <span ng-repeat="auth in $ctrl.user.authorities">{{auth.authority}}{{$last ? '' : ',&nbsp'}}</span>
                </md-tooltip>
              </ng-md-icon>
              <label ng-repeat="role in $ctrl.user.roles"
                >{{"[" + role.scope + "]&nbsp;" + role.name}}{{$last ? '' : '&nbsp;-&nbsp;'}}</label
              >
            </div>
            <div layout="row" layout-align="start center">
              <ng-md-icon flex="10" icon="group"></ng-md-icon>
              <label>{{$ctrl.groups}}</label>
            </div>
            <div layout="row" ng-if="$ctrl.fields && $ctrl.fields.length > 0" ng-repeat="field in $ctrl.fields">
              <label flex="10" class="field-label">{{field.label}}</label>
              <md-input-container class="field-input-container">
                <input
                  ng-if="!field.values || field.values.length == 0"
                  ng-model="$ctrl.user.customFields[field.key]"
                  type="text"
                  ng-required="field.required"
                />
                <md-select
                  style="padding-bottom: 2em"
                  ng-if="field.values && field.values.length > 0"
                  ng-model="$ctrl.user.customFields[field.key]"
                  ng-required="field.required"
                >
                  <md-option ng-value="value" ng-repeat="value in field.values">{{ value }}</md-option>
                </md-select>
              </md-input-container>
            </div>
          </div>

          <div>
            <gravitee-image
              image-id="$ctrl.user.id"
              image="$ctrl.user.picture"
              image-url="$ctrl.user.picture_url"
              image-border-radius="true"
              image-name="$ctrl.user.displayName"
              image-form="formUser"
              can-delete="true"
              delete-label="Use default"
            ></gravitee-image>
          </div>
        </div>
        <div layout="row" style="margin-top: 20px">
          <md-button type="submit" ng-disabled="formUser.$pristine">Update</md-button>
          <md-button ng-click="$ctrl.cancel()" ng-disabled="formUser.$pristine">Cancel</md-button>
        </div>
      </form>
    </div>
  </div>

  <div class="gv-form">
    <h2>Personal access tokens</h2>
    <span>Tokens you have generated that can be used to access the Gravitee.io management API.</span>
    <div class="gv-form-content" layout="column">
      <md-button class="md-raised" ng-click="$ctrl.generateToken()" style="width: 40%; margin: 0 auto"> Generate token </md-button>
      <md-table-container ng-show="$ctrl.tokens.length">
        <table md-table>
          <thead md-head>
            <tr md-row>
              <th md-column>Name</th>
              <th md-column>Created</th>
              <th md-column>Last use</th>
              <th md-column></th>
            </tr>
          </thead>
          <tbody md-body>
            <tr md-row ng-repeat="token in $ctrl.tokens">
              <td md-cell>
                <span><b>{{token.name}}</b></span>
              </td>
              <td md-cell>
                <span><b>{{token.created_at | datetimeFilter}}</b></span>
              </td>
              <td md-cell>
                <span><b>{{token.last_use_at? (token.last_use_at | humanDateFilter) : 'never'}}</b></span>
              </td>
              <td md-cell>
                <ng-md-icon ng-click="$ctrl.revoke(token)" icon="delete" size="24" title="Revoke token '{{token.name}}'"></ng-md-icon>
              </td>
            </tr>
          </tbody>
        </table>
      </md-table-container>
    </div>
  </div>

  <div class="gv-form gv-form-danger">
    <h2>Danger Zone</h2>
    <div class="gv-form-content" layout="column">
      <div layout="row" layout-align="space-between center" ng-if="!$ctrl.canDeleteMyAccount()">
        <div class="gv-form-danger-text">
          Please transfer ownership of your APIs and applications or delete them before deleting your account
        </div>
        <div><md-button class="md-flat md-warn" type="button" ng-disabled="true">Delete my account</md-button></div>
      </div>

      <div layout="row" layout-align="space-between center" ng-if="$ctrl.canDeleteMyAccount()">
        <div class="gv-form-danger-text">
          Please transfer ownership of your APIs and applications or delete them before deleting your account
        </div>
        <div><md-button class="md-flat md-warn" type="button" ng-click="$ctrl.deleteMyAccount()">Delete my account</md-button></div>
      </div>
    </div>
  </div>
</div>
